<template>
	<div class="platform-goods-data table-theme">
		<head-title title="数据--平台商品统计"></head-title>
		<div style="display: flex;">
			<div v-for="(item, index) in cardList" :key="index" style="margin-right: 20px;">
				<cardPanel :img="item.img" :title="item.title" :num="item.num" :color="item.color"></cardPanel>
			</div>
		</div>

		<el-row :gutter="20">
			<el-col :span="12">
				<div class="platform-goods-column">
					<div class="chart-view-title">销售商品总数</div>
					<div class="chart-menu">
						<div class="chart-menu-left">
							<div class="tips">请选择</div>
							<div class="date-select">
								<el-select v-model="dateVal.year" placeholder="年份" @change="chartdateSelect(0, 0)">
									<el-option v-for="item in orderOptions.yearOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
								</el-select>
							</div>
							<div class="date-select">
								<el-select v-model="dateVal.month" placeholder="月份" @change="chartdateSelect(0, 1)">
									<el-option v-for="item in orderOptions.monthOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
								</el-select>
							</div>
						</div>
						<div class="chart-menu-right">
							<div class="right-time-select">
								<span @click="timeSelect(0, 0)" :class="[timeType1 == 0 ? 'active' : '']">年</span>
								<span @click="timeSelect(0, 1)" :class="[timeType1 == 1 ? 'active' : '']">月</span>
							</div>
						</div>
					</div>
					<BarChart :chart-data="orderData1"></BarChart>
				</div>
			</el-col>
			<el-col :span="12">
				<div class="platform-goods-column">
					<div class="chart-view-title">增加商品数</div>
					<div class="chart-menu">
						<div class="chart-menu-left">
							<div class="tips">请选择</div>
							<div class="date-select">
								<el-select v-model="dateVal2.year" placeholder="年份" @change="chartdateSelect(1, 0)">
									<el-option v-for="item in orderOptions.yearOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
								</el-select>
							</div>
							<div class="date-select">
								<el-select v-model="dateVal2.month" placeholder="月份" @change="chartdateSelect(1, 1)">
									<el-option v-for="item in orderOptions.monthOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
								</el-select>
							</div>
						</div>
						<div class="chart-menu-right">
							<div class="right-time-select">
								<span @click="timeSelect(1, 0)" :class="[timeType2 == 0 ? 'active' : '']">年</span>
								<span @click="timeSelect(1, 1)" :class="[timeType2 == 1 ? 'active' : '']">月</span>
							</div>
						</div>
					</div>
					<BarChart :chart-data="orderData2"></BarChart>
				</div>
			</el-col>
		</el-row>

		<el-row :gutter="20">
			<el-col :span="12">
				<div class="platform-goods-statistics">
					<div class="data-menu">
						<span @click="dateSelect(0)" :class="[dateType == 0 ? 'active' : '']">日</span>
						<span @click="dateSelect(1)" :class="[dateType == 1 ? 'active' : '']">周</span>
						<span @click="dateSelect(2)" :class="[dateType == 2 ? 'active' : '']">月</span>
						<span @click="dateSelect(3)" :class="[dateType == 3 ? 'active' : '']">年</span>
					</div>
					<div class="data-panel">
						<el-row>
							<el-col :span="12">
								<div class="data-panel-item">
									<p>销售商品总数</p>
									<p>{{ timeGoodsData.new.all }}</p>
								</div>
							</el-col>
							<el-col :span="12">
								<div class="data-panel-item" style="border-right: none;">
									<p>增加商品数</p>
									<p>{{ timeGoodsData.new.succeed }}</p>
								</div>
							</el-col>
							<el-col :span="12">
								<div class="data-panel-item" style="border-bottom: none;">
									<p>{{ dateText }}销售商品总数</p>
									<p>{{ timeGoodsData.old.all }}</p>
								</div>
							</el-col>
							<el-col :span="12">
								<div class="data-panel-item" style="border-bottom: none;border-right: none;">
									<p>{{ dateText }}增加商品数</p>
									<p>{{ timeGoodsData.old.succeed }}</p>
								</div>
							</el-col>
						</el-row>
					</div>
				</div>
			</el-col>
			<el-col :span="12">
				<div class="platform-goods-Ranking-data">
					<div class="platform-goods-list-data-view">
						<div class="platform-goods-top-menu">
							<div class="platform-goods-menu-left">商品人气排行榜</div>
						</div>

						<el-table :data="rankingData">
							<el-table-column label="排行" align="center" prop="">
								<template slot-scope="scope">
									{{ scope.$index + 1 }}
								</template>
							</el-table-column>
							<el-table-column label="型号" align="center" prop="goods_sn"></el-table-column>
							<el-table-column label="名称" align="center" prop="goods_name"></el-table-column>
							<el-table-column label="主图" align="center" width="80">
								<template slot-scope="scope">
									<ImgPopover :src="scope.row.image_middle"></ImgPopover>
								</template>
							</el-table-column>
							<el-table-column label="查看次数" align="center" prop="click"></el-table-column>
						</el-table>
						<div class="pages">
							<el-pagination background layout="prev, pager, next, jumper" :total="rtotal" @current-change="getRankingData"
							 :current-page="rpage"></el-pagination>
						</div>
					</div>
				</div>
			</el-col>
		</el-row>

		<div class="platform-goods-list-data">
			<div class="platform-goods-list-data-view">
				<div class="platform-goods-top-menu">
					<div class="platform-goods-menu-left">
						<div class="date-select-view">
							<el-select v-model="goodsListSelectVal.year" placeholder="年份" @change="OrderListSelect">
								<el-option v-for="item in orderOptions.yearOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
							</el-select>
						</div>

						<div class="date-select-view">
							<el-select v-model="goodsListSelectVal.month" placeholder="月份" @change="OrderListSelect">
								<el-option v-for="item in orderOptions.monthOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
							</el-select>
						</div>
					</div>

					<div class="platform-goods-menu-right">
						<refresh-button @refresh="refreshPage"></refresh-button>
						<search-view :option="searchOption" @value="goSearch" @clear="refreshPage"></search-view>
					</div>
				</div>
				<p style="text-align: right;line-height: 30px;">总数据数：{{total}}</p>
				<el-table :data="goodsListData" stripe>
					<el-table-column label="商品ID" align="center" prop="goods_id"></el-table-column>
					<el-table-column label="主图" align="center" width="80">
						<template slot-scope="scope">
							<ImgPopover :src="scope.row.image_middle"></ImgPopover>
						</template>
					</el-table-column>
					<el-table-column label="名称" align="center" prop="goods_name"></el-table-column>
					<el-table-column label="人气" align="center" prop="click"></el-table-column>
					<el-table-column label="销售额" align="center" prop="money"></el-table-column>
					<el-table-column label="销售量" align="center" prop="counts"></el-table-column>
					<el-table-column label="sku_sn" align="center" prop="sku_sn"></el-table-column>
				</el-table>
				<div class="pages">
					<el-pagination background layout="prev, pager, next, jumper" :total="total" @current-change="getStoreData"
					 :current-page="page"></el-pagination>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import BarChart from './components/BarChart';
	import percentageChart from './components/percentageChart';
	import cardPanel from '@/components/card-panel';
	import ImgPopover from '@/components/ImgPopover';
	export default {
		components: {
			BarChart,
			percentageChart,
			cardPanel,
			ImgPopover
		},
		data() {
			return {
				date: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
				orderData1: {
					tips: '销售商品总数',
					color: '#8bebe1',
					date: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
					data: []
				},
				orderData2: {
					tips: '增加商品数',
					color: '#a6c7fb',
					date: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
					data: []
				},
				orderOptions: {
					yearOptions: [{
							value: '2018',
							label: '2018'
						},
						{
							value: '2019',
							label: '2019'
						},
						{
							value: '2020',
							label: '2020'
						}
					],
					monthOptions: [{
							value: '01',
							label: '01'
						},
						{
							value: '02',
							label: '02'
						},
						{
							value: '03',
							label: '03'
						},
						{
							value: '04',
							label: '04'
						},
						{
							value: '05',
							label: '05'
						},
						{
							value: '06',
							label: '06'
						},
						{
							value: '07',
							label: '07'
						},
						{
							value: '08',
							label: '08'
						},
						{
							value: '09',
							label: '09'
						},
						{
							value: '10',
							label: '10'
						},
						{
							value: '11',
							label: '11'
						},
						{
							value: '12',
							label: '12'
						}
					]
				},
				timeType1: 0,
				timeType2: 0,
				dateType: 0, // 日周月年
				dateText: '昨日',
				dateTextList: ['昨日', '上周', '上个月', '上一年'],
				timeGoodsData: {
					new: '',
					old: ''
				}, // 日周月年数据对比
				cardList: [{
						title: '销售商品总数(全部)',
						img: require('../../assets/image/ico_sale.png'),
						num: '0',
						color: '#61a1f9'
					},
					{
						title: '增加商品数(全部)',
						img: require('../../assets/image/ico_Addgoods.png'),
						num: '0',
						color: '#0BC6B2'
					}
				],
				dateVal: {
					year: new Date().getFullYear(),
					month: this.getCurrentMonth(new Date().getMonth() + 1)
				},
				dateVal2: {
					year: new Date().getFullYear(),
					month: this.getCurrentMonth(new Date().getMonth() + 1)
				},
				selectContent: '',
				classSelect: 0,
				goodsListData: [],
				goodsListSelectVal: {
					year: '',
					month: ''
				},
				page: 0,
				total: 0,
				totalData: 0,
				rankingData: [], // 排行榜数据
				rtotal: 0,
				rpage: 0,
				searchOption: [{
					value: 0,
					label: '商户ID'
				}],
			};
		},
		methods: {
			init(type, day, time) {
				let data = {
					type: type,
					day: day,
					time: time,
					store_id: localStorage.getItem('store_id')
				};
				this.$http(this.$ApiList.GoodsData, data).then(res => {
					if (res.code == 200) {
						if (type == 1) {
							// 销售商品总数
							this.orderData1.data = [];

							if (time.toString().indexOf('-') != -1) {
								this.orderData1.date = [];
							} else {
								this.orderData1.date = this.date;
							}

							if (time.toString().indexOf('-') != -1) {
								res.datas.self.forEach(item => {
									this.orderData1.date.push(item.add_time);
									this.orderData1.data.push(item.counts);
								});
							} else {
								this.orderData1.data = this.proofreadingTime(res.datas.self);
							}
						} else if (type == 2) {
							// 增加商品数
							this.orderData2.data = [];

							if (time.toString().indexOf('-') != -1) {
								this.orderData2.date = [];
							} else {
								this.orderData2.date = this.date;
							}
							if (time.toString().indexOf('-') != -1) {
								res.datas.add.forEach(item => {
									this.orderData2.date.push(item.add_time);
									this.orderData2.data.push(item.counts);
								});
							} else {
								this.orderData2.data = this.proofreadingTime(res.datas.add);
							}
						}
					}
				});
			},
			timeSelect(type, index) {
				if (type == 0) {
					this.timeType1 = index;
					if (index == 0) {
						this.init(1, 2, this.dateVal.year);
					} else {
						this.init(1, 3, this.dateVal.year + '-' + this.dateVal.month);
					}
				} else if (type == 1) {
					this.timeType2 = index;
					if (index == 0) {
						this.init(2, 2, this.dateVal2.year);
					} else {
						this.init(2, 3, this.dateVal2.year + '-' + this.dateVal2.month);
					}
				}
			},
			// 获取商品对比数据
			getGoodsComparison() {
				let data = {
					store_id: localStorage.getItem('store_id')
				};
				let dayList = [4, 3, 2, 1];
				data.day = dayList[this.dateType];
				this.$http(this.$ApiList.GoodsContrastData, data).then(res => {
					if (res.code == 200) {
						if (this.dateType == 0) {
							this.timeGoodsData.new = res.datas.today;
							this.timeGoodsData.old = res.datas.yesterday;
						} else if (this.dateType == 1) {
							this.timeGoodsData.new = res.datas.week;
							this.timeGoodsData.old = res.datas.last_week;
						} else if (this.dateType == 2) {
							this.timeGoodsData.new = res.datas.month;
							this.timeGoodsData.old = res.datas.last_month;
						} else if (this.dateType == 3) {
							this.timeGoodsData.new = res.datas.year;
							this.timeGoodsData.old = res.datas.last_year;
						}
						this.cardList[0].num = res.datas.all.all.toString();
						this.cardList[1].num = res.datas.all.succeed.toString();
					}
				});
			},
			// 订单对比数据时间选择
			dateSelect(index) {
				this.dateType = index;
				this.dateText = this.dateTextList[index];
				this.getGoodsComparison();
			},
			chartdateSelect(index, type) {
				if (index == 0) {
					if (type == 0) {
						this.timeType1 = 0;
						this.init(1, 2, this.dateVal.year);
					} else {
						this.timeType1 = 1;
						this.init(1, 3, this.dateVal.year + '-' + this.dateVal.month);
					}
				} else if (index == 1) {
					if (type == 0) {
						this.timeType2 = 0;
						this.init(2, 2, this.dateVal2.year);
					} else {
						this.timeType2 = 1;
						this.init(2, 3, this.dateVal2.year + '-' + this.dateVal2.month);
					}
				}
			},
			getCurrentMonth(month) {
				if (month < 10) {
					month = 0 + '' + month;
				}
				return month;
			},
			// 商品列表数据分析
			getStoreData(e) {
				let data = {
					page: e - 1 ? e - 1 : 0,
					limit: 10,
					goods_store_id: localStorage.getItem('store_id')
				};
				if (this.goodsListSelectVal.year == '') {
					data.day = 1;
				} else if (this.goodsListSelectVal.month == '') {
					data.day = 2;
					data.time = this.goodsListSelectVal.year;
				} else {
					data.day = 3;
					data.time = this.goodsListSelectVal.year + '-' + this.goodsListSelectVal.month;
				}

				if (this.selectContent != '' && this.classSelect == 0) {
					data.store_id = this.selectContent;
				}

				this.$http(this.$ApiList.GoodsselfData, data).then(res => {
					if (res.datas.list.length > 0) {
						this.goodsListData = res.datas.list;
						this.total = res.datas.count;
					}
				});
			},
			// 筛选订单列表数据
			OrderListSelect() {
				this.getStoreData();
			},
			// 刷新商品列表数据
			refreshPage() {
				this.goodsListSelectVal.year = '';
				this.goodsListSelectVal.month = '';
				this.selectContent = '';
				this.classSelect = 0;
				this.getStoreData();
			},
			// 搜索商品列表数据
			goSearch(classSelect, selectContent) {
				this.classSelect = classSelect;
				this.selectContent = selectContent;
				this.getStoreData();
			},
			// 获取排行榜数据
			getRankingData(e) {
				let data = {
					page: e - 1 ? e - 1 : 0,
					limit: 5,
					order_by: 'click'
				};

				this.$http(this.$ApiList.GoodsList, data).then(res => {
					this.rankingData = res.datas.data;
					this.rtotal = res.datas.count;
				});
			},
			getYear() {
				this.orderOptions.yearOptions = [];
				let yearNum = new Date().getFullYear() + 1;
				for (let i = 2018; i < yearNum; i++) {
					let year = {
						value: i,
						label: i
					};
					this.orderOptions.yearOptions.push(year);
				}
			},
			proofreadingTime(data, type) {
				let orderData = [];
				let addTimeList = [];
				let dateContrast = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'];
				data.forEach(item => {
					addTimeList.push(item.add_time);
				});

				for (let i = 0; i < dateContrast.length; i++) {
					let index = addTimeList.indexOf(dateContrast[i]);
					if (index != -1) {
						if (type) {
							orderData.push(data[index].rate.replace(/%/, ''));
						} else {
							orderData.push(data[index].counts);
						}
					} else {
						orderData.push(0);
					}
				}
				return orderData;
			},
			goGoodsList(id) {
				this.$router.push({
					path: '/goods_list',
					query: {
						id: id
					}
				});
			}
		},
		created() {
			let year = new Date().getFullYear();
			this.getYear();
			this.init(1, 2, year);
			this.init(2, 2, year);
			this.getStoreData();
			this.getGoodsComparison();
			this.getRankingData();
		}
	};
</script>
<style>
	.platform-goods-column,
	.platform-goods-statistics {
		margin-top: 20px;
		background-color: #ffffff;
		box-shadow: 0px 6px 10px 0px rgba(0, 0, 0, 0.14);
		border-radius: 4px;
	}

	.platform-goods-column .chart-view-title {
		margin: 0 28px;
		line-height: 50px;
		font-size: 16px;
		font-weight: bold;
		border-bottom: 1px solid #dedede;
		color: #333;
	}

	.platform-goods-column .chart-menu {
		margin: 20px 0 20px 0;
		padding: 0 28px 0 40px;
		display: flex;
	}

	.platform-goods-column .chart-menu .chart-menu-left {
		display: flex;
		flex: 1;
	}

	.platform-goods-column .chart-menu .tips {
		margin-right: 12px;
		line-height: 30px;
	}

	.date-select {
		margin-right: 10px;
		width: 80px;
	}

	.platform-goods-column .el-input__inner,
	.platform-goods-column .el-select__caret,
	.platform-goods-column .el-select-dropdown__item {
		height: 30px;
		line-height: 30px;
	}

	/* 年日月选择 */
	.platform-goods-column .chart-menu .chart-menu-right {
		display: flex;
		flex: 1;
		flex-direction: row-reverse;
		align-items: center;
	}

	.platform-goods-column .chart-menu .chart-menu-right .right-time-select {
		display: flex;
		height: 24px;
	}

	.platform-goods-column .chart-menu .chart-menu-right span {
		display: block;
		width: 34px;
		height: 24px;
		line-height: 24px;
		text-align: center;
		background: #f2f2f2;
		cursor: pointer;
	}

	.platform-goods-column .chart-menu .chart-menu-right .active {
		color: #ffffff;
		background: #999999;
	}

	.platform-goods-column .chart-menu .chart-menu-right span:nth-child(1) {
		border-radius: 4px 0 0 4px;
	}

	.platform-goods-column .chart-menu .chart-menu-right span:nth-child(2) {
		border-radius: 0 4px 4px 0;
	}

	/* 日周月年订单 */
	.platform-goods-statistics .data-menu {
		margin: 0 36px;
		line-height: 56px;
		font-size: 16px;
		font-weight: bold;
		border-bottom: 1px solid #dedede;
		color: #333;
	}

	.platform-goods-statistics .data-menu span {
		display: inline-block;
		width: 50px;
		line-height: 28px;
		text-align: center;
		cursor: pointer;
	}

	.platform-goods-statistics .data-menu .active {
		border-bottom: 4px solid #2073f5;
	}

	.platform-goods-statistics .data-panel {
		padding: 46px 66px;
		text-align: center;
	}

	.platform-goods-statistics .data-panel .data-panel-item {
		padding: 20px 0 33px 0;
		border-right: 1px solid #dedede;
		border-bottom: 1px solid #dedede;
	}

	.platform-goods-statistics .data-panel .data-panel-item p:first-child {
		margin-bottom: 56px;
		line-height: 15px;
		color: #666666;
	}

	.platform-goods-statistics .data-panel .data-panel-item p:last-child {
		font-size: 24px;
		font-weight: bold;
		color: #333333;
	}

	/* 订单数据列表 */
	.platform-goods-Ranking-data,
	.platform-goods-list-data {
		margin-top: 20px;
	}

	.platform-goods-list-data-view {
		padding: 20px 20px;
		background-color: #fff;
		border-radius: 4px;
		box-shadow: 0px 6px 10px 0px rgba(0, 0, 0, 0.14);
	}

	.platform-goods-top-menu {
		display: flex;
		margin-bottom: 10px;
	}

	.platform-goods-menu-left {
		flex: 1;
		display: flex;
		font-weight: bold;
	}

	.platform-goods-menu-right {
		flex: 2;
		display: flex;
		flex-direction: row-reverse;
	}

	.platform-goods-top-menu .input-with-select .el-input-group__prepend {
		width: 110px;
		background-color: #fff;
	}

	.date-select-view {
		margin-right: 10px;
		width: 120px;
	}

	/* 表头背景色 */
	.platform-goods-Ranking-data .el-table thead th {
		background-color: #fff !important;
		color: #333;
	}

	/* 更改表格上下间隔 */
	.platform-goods-Ranking-data .el-table th,
	.el-table td {
		padding: 6px 0;
	}
</style>
